<script setup>
import { useUserStore } from '@/store/index.js'

import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Key } from '@element-plus/icons-vue'
import { putUpdatePassword } from '@/apis/user'
import router from '@/router'

const userStore = useUserStore()

//表单
const formref = ref(null)

const ruleForm = ref({
  password: "",
  newPassword: "",
  confirmPassword: "",
});

const rules = {
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],

  newPassword: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {
      min: 6,
      max: 16,
      message: '长度在 6 到 16 个字符',
      trigger: 'blur',
    },
  ],
  confirmPassword: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        if (value !== ruleForm.value.newPassword) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],


};

const userinfo = ref({})


onMounted(() => {
  //浅拷贝一份 防止污染pinia的数据
  userinfo.value = {...userStore.userInfo}
  ruleForm.value.username = userinfo.value.username

})

//现在密码是lxt990617
const onSubmit = () => {
  formref.value.validate((valid) => {
    if (valid) {
      if (ruleForm.value.newPassword != ruleForm.value.confirmPassword) {
        ElMessage({type: 'warning', message: "两次新密码不一致"})
      } else {
        ElMessageBox.confirm(
            '你确定要修改密码吗',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              icon: Key,
              center: true,
            }
        )
            .then(async () => {
              const res = await putUpdatePassword(ruleForm.value)
              if (res.code == 200) {
                ElMessage({
                  type: 'success',
                  message: '修改成功',
                })
                router.push('/login')
              }

            })
            .catch(() => {

            })

      }
    } else {
      console.log('error submit!!');
      return false;
    }
  });


}


</script>

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 24px">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>修改密码</el-breadcrumb-item>
  </el-breadcrumb>


  <el-form class="demo-form-inline" label-width=auto label-position='center' ref='formref' :rules="rules"
           :model="ruleForm">
    <el-form-item label="用户名">
      <el-input clearable v-model="userinfo.username" disabled />
    </el-form-item>

    <el-form-item label="原始密码" prop='password'>
      <el-input type='password' show-password v-model="ruleForm.password" />
    </el-form-item>

    <el-form-item label="新密码" prop='newPassword'>
      <el-input type='password' show-password v-model=ruleForm.newPassword />
    </el-form-item>
    <el-form-item label="确认新密码" prop='confirmPassword'>
      <el-input type='password' show-password v-model=ruleForm.confirmPassword />
    </el-form-item>


    <el-form-item>
      <el-button type="primary" @click=onSubmit>确认修改</el-button>
    </el-form-item>

  </el-form>
</template>

<style lang="less" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;

}

:deep(.el-form-item:last-child) {
  margin-left: 120px
}</style>
